<template>
  <div class="MaterialTable">
    <div class="HeadShortcut">
      <div class="HeadShortcut_icon" @click="retreatClick">
        <img src="../../assets/images/jian_03.jpg" alt />
      </div>
      <ul class="HeadShortcut_ul scrollber">
        <li v-for="(item,index) in NextPage" :key="index" @click="ClickChild(item,index)">
          <el-tooltip class="item" effect="dark" :content="item" placement="top">
            <div style="padding-left: 15px;">{{item}}</div>
          </el-tooltip>
          <div>
            <img src="../../assets/images/jian2_05.png" alt />
          </div>
        </li>
      </ul>
    </div>
    <zycm-table
    style="overflow: hidden;"
      @zyLoadData="loadData"
      zy-table-ref="media_group_material_table"
      :zy-table-data="tabledataList"
      zy-table-height="60vh"
      zy-table-select-type="checkbox"
      @zyTableSelect="tableSelect"
      @zyCellClick="zyCellClick"
      zy-row-key="materialId"
      :zy-pager-count="5"
      :row-class-name="rowHandle"
      empty-text=" "
    >
      <el-table-column type="expand">
        <template v-if="props.row.type!==0" slot-scope="props" >
          <el-form label-position="left" inline class="demo-table-expand fold">
            <!-- <el-row>
            <el-col :span="6">-->
            <el-form-item label="文件名:" v-if="props.row.materialName">
              <span v-if="props.row.materialName">{{props.row.materialName}}</span>
              <span v-else>无</span>
            </el-form-item>
            <!-- </el-col>
            <el-col :span="6">-->
            <el-form-item label="上传者:">
              <span v-if="props.row.creator">{{props.row.creator}}</span>
              <span v-else>无</span>
            </el-form-item>
            <!-- </el-col>
            <el-col :span="6">-->
            <el-form-item label="审核者:">
              <span v-if="props.row.auditor">{{props.row.auditor}}</span>
              <span v-else>无</span>
            </el-form-item>
            <!-- </el-col>
            <el-col :span="6">-->
            <el-form-item label="上传时间:" v-if="props.row.uploadTime">
              <span v-if="props.row.uploadTime">{{props.row.uploadTime | dateFormat}}</span>
              <span v-else>无</span>
            </el-form-item>
            <!-- </el-col> -->
            <!-- </el-row> -->
            <!-- <el-row> -->
            <!-- <el-col :span="12"> -->
            <el-form-item label="文件大小:" v-if="props.row.size">
              <span v-if="props.row.size">{{props.row.size}}</span>
              <span v-else>无</span>
            </el-form-item>
            <!-- </el-col>
            <el-col :span="12">-->
            <el-form-item label="时长:">
              <span v-if="props.row.timeLenth">{{props.row.timeLenth | convertSecond}}</span>
              <span v-else>无</span>
            </el-form-item>
            <!-- </el-col>
            </el-row>-->
          </el-form>
        </template>
        <template v-else>
          <el-form label-position="left" inline class="demo2-table-expand"></el-form>
        </template>
      </el-table-column>
      <!-- <el-table-column type="index" label="序号" :index="indexMethod"></el-table-column> -->
      <el-table-column label="文件名" prop="materialName" show-overflow-tooltip min-width="180">
        <template slot-scope="props" style="cursor:pointer;">
          <span style="color:#2183d8;display: block;" v-if="props.row.type==0">
            <!-- <img src="../../assets/images/file_03.png" style="vertical-align: middle;" /> -->
            <i
              class="el-icon-folder-opened"
              style="color: #e6a23c;font-size: 30px;vertical-align: middle; margin-right: 5px;"
            ></i>
            <div
              style="vertical-align: middle;display: inline-block;width: 69%;"
            >{{props.row.materialName}}</div>
          </span>
          <span v-else>{{props.row.materialName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="宽度*高度" prop="width" width="120">
        <template slot-scope="props">
          <div>
            <span>{{props.row.width?props.row.width+'*':''}}</span>
            <span>{{props.row.height?props.row.height:''}}</span>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="高度(px)" prop="height"></el-table-column> -->
      <el-table-column label="发布状态" prop="publishNum" width="80">
        <template slot-scope="props" v-if="props.row.type !==0">
          <el-tag v-if="props.row.publishNum==0" :size="GlobalVar.sizeSet.tag">未发布</el-tag>
          <el-tag type="success" v-else :size="GlobalVar.sizeSet.tag">已发布</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" prop="auditStatus" width="100">
        <template slot-scope="props" v-if="props.row.type !==0">
          <el-tag v-if="props.row.auditStatus==0" :size="GlobalVar.sizeSet.tag">未审核</el-tag>
          <el-tag type="success" v-else-if="props.row.auditStatus==1" :size="GlobalVar.sizeSet.tag">审核通过</el-tag>
          <el-tag type="danger" v-else :size="GlobalVar.sizeSet.tag">审核未通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="预览" class-name="stopRowClick" width="80">
        <template slot-scope="props" v-if="props.row.type!==0">
          <el-button
            type="primary"
            icon="el-icon-view"
            circle
            @click="openPreviewClick(props.row)"
            v-if="props.row.type!==6 && Invoking.forFunctionCode('material:m_show')"
            :size="GlobalVar.sizeSet.btn"
            style="fontSize:18px;"
          >
            <!-- <img style="width:18px" src="../../assets/images/yan2_03.png" alt /> -->
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right"  width="140" prop="auditStatus" class-name="stopRowClick"  v-if="Invoking.forFunctionCode('material:updateMaterial')">
        <template slot-scope="scope">
          <el-button :size="GlobalVar.sizeSet.btn" type="primary" @click="MaterialInformation(scope.row)">素材信息</el-button>
          <!-- <el-dropdown :size="GlobalVar.sizeSet.dropdown">
            <el-button type="primary" :size="GlobalVar.sizeSet.btn">
              更多
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="MaterialInformation(scope.row)">素材信息</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
        </template>
      </el-table-column>
    </zycm-table>
    <preview v-bind:previewList="previewList" ref="showMaterial"></preview>
  </div>
</template>

<script>
import preview from "../../components/preview/preview.vue";
export default {
  name: "MaterialTable",
  props: {
    refreshTable: {
      required: true,
    },
    TransferInputText: {
      required: true,
    },
    TransferChangeText: {
      required: true,
    },
  },
  components: {
    preview,
  },
  data() {
    return {
      openPreview: false,
      NameList: [],
      query: {
        page: 1,
        pageSize: this.GlobalVar.query.pageSize,
        total: 0,
      },
      tableData: [],
      // 搜索数据
      InputText: "",
      ChangeText: "",
      // 素材id
      materialId: "",
      // 跳转地址
      skipPath: "/",
      // 需要删除的数据
      DeleteArrayList: [],
      // 下一页的路径
      NextPage: ["根目录"],
      // 需要预览的数据
      previewData: "",
      // 预览的文本
      previewTextData: "",
      // 传递预览数据
      previewList: "",
      tabledataList: [], //保存当页的所有table数据
      tablePageList: [], //保存对应table的page数据
      ProgramSelectList: [],
    };
  },
  watch: {
    /*  TransferInputText(val) {
      //this.query.page = 1;
      //this.InputText = val;
      //this.getList();
    },
    TransferChangeText(val) {
      //this.query.page = 1;
      //this.ChangeText = val;
      /*this.getList();
    }, */
    refreshTable(val) {
      // this.query.page = 1;
      // this.query.pageSize = 10;
      this.getList();
    },
  },
  created() {
    this.getList();
  },
  methods: {
    //给子组件刷新用
    async loadData(formData, tableRef) {
      //提前修正isReqData状态 后续赋值随时会触发table组件的computed  后面还要进行一次修正
      for (let key in this.tabledataList) {
        if (this.tabledataList[key].ref === tableRef) {
          this.tabledataList[key].isReqData = true; //标记更新数据的状态 组件中会根据此判断是否重新更新数据
        } else {
          this.tabledataList[key].isReqData = false;
        }
      }

      //子组件触发查询时  处理查询的参数
      if (this.tablePageList[tableRef]) {
        this.tablePageList[tableRef].set("page", formData.get("page"));
        this.tablePageList[tableRef].set("pageSize", formData.get("pageSize"));
      }

      let res;
      if (tableRef == "media_group_material_table") {
        //发布-选择节目列表
        res = await this.$http.post(
          "material/selectPage",
          this.tablePageList[tableRef]
        );
        res.data.dataList.forEach((element, index) => {
          if (element.type == 0) {
            element["isOpen"] = true;
          } else {
            element["isOpen"] = true;
          }
        });
        //每次请求数据后 清空选中数据
        // this.ProgramSelectList = [];
      }

      if (res && res.data.result === "success") {
        //记录更新分页数据
        res.data.ref = tableRef;
        //更新记录
        let sign = 0;
        for (let key in this.tabledataList) {
          if (this.tabledataList[key].ref === tableRef) {
            if (sign > 1) {
              //去掉重复数据
              this.tabledataList.splice(key, 1);
            } else {
              this.tabledataList.splice(key, 1, res.data);
              this.tabledataList[key].isReqData = true; //标记更新数据的状态 组件中会根据此判断是否重新更新数据
            }
            sign++;
          } else {
            this.tabledataList[key].isReqData = false;
          }
        }
        if (sign == 0) {
          //没有初始化时
          res.data.isReqData = true;
          this.tabledataList.push(res.data);
        }
      } else {
        if (res && res.data.result === "error") {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        } else {
          this.$message({
            type: "error",
            message: "请求数据出现异常",
          });
        }
      }
    },
    //当页刷新数据
    currentTableLoad(tableRef, firstPage, fd) {
      if (firstPage) {
        //加载第一页数据
        if (!this.tablePageList[tableRef]) {
          this.tablePageList[tableRef] = new FormData();
          this.tablePageList[tableRef].set("pageSize", this.GlobalVar.query.pageSize);
        }
        this.tablePageList[tableRef].set("page", 1);
      }
      //如果有其他查询参数 合并处理
      if (fd) {
        for (let item of fd.entries()) {
          this.tablePageList[tableRef].set(item[0], item[1]);
        }
      }
      this.loadData(this.tablePageList[tableRef], tableRef);
    },
    //表格checkbox单点 全选
    tableSelect(selection, row, tableRef) {
      if (tableRef === "media_group_material_table") {
        this.$emit("removeMaterial", selection);
      }
    },
    //行 单元格 点击单选
    async zyCellClick(row, column, cell, event, tableRef) {
      if (tableRef === "media_group_material_table") {
        this.skipSite(row, column, cell, event);
      }
    },
    MaterialInformation(e) {
      this.$emit("InformationId", e);
    },
    // 点击预览
    openPreviewClick(e) {
      this.$refs.showMaterial.openWin(e);
    },

    ClickChild(t, i) {
      if (t == "根目录") {
        this.NextPage = ["根目录"];
        this.skipPath = "/";
        this.getList();
        window.sessionStorage.setItem(
          "skipPath",
          JSON.stringify(this.skipPath)
        );
        return;
      }
      let arrayTime = [];
      let NextPage1 = [];
      this.NextPage.forEach((ele, num) => {
        if (num <= i) {
          NextPage1.push(ele);
          if (ele !== "根目录") {
            arrayTime.push(ele + "/");
          }
        }
      });
      this.skipPath = "/";
      this.skipPath = this.skipPath + arrayTime.toString();
      this.NextPage = NextPage1;
      this.getList();
      this.skipPath = this.skipPath.replace(/,/g, "");
      window.sessionStorage.setItem("skipPath", JSON.stringify(this.skipPath));
    },
    // 跳转
    retreatClick() {
      if (this.NextPage.length == 1) {
        return;
      }
      let skipPath2 = [];
      this.NextPage.pop();
      this.NextPage.forEach((ele, num) => {
        if (num !== 0) {
          skipPath2.push(ele + "/");
        }
      });
      this.skipPath = "/";
      this.skipPath = this.skipPath + skipPath2.toString();
      window.sessionStorage.setItem("skipPath", JSON.stringify(this.skipPath));
      this.getList();
    },
    // 点击跳转
    skipSite(row, column, cell, event) {
      //过滤掉与行点击事件冲突的列
      if (cell.className.search("stopRowClick") >= 0) return;
      let skipPath2 = [];
      if (row.type == 0) {
        this.NextPage.push(row.materialName);
        this.NextPage.forEach((ele, num) => {
          if (ele !== "根目录") {
            skipPath2 = [];
            skipPath2.push(ele + "/");
          }
        });
        this.skipPath = this.skipPath + skipPath2.toString();
        this.query.page = 1;
        this.query.pageSize = this.GlobalVar.query.pageSize;
        window.sessionStorage.setItem(
          "skipPath",
          JSON.stringify(this.skipPath)
        );
        this.getList();
      } else {
        // this.$refs.media_group_material_table.toggleRowExpansion(row);
      }
    },
    //复选框操作
    selectInit(row, index) {
      if (row.type == 0) {
        return false; //不可勾选
      } else {
        return true; //可勾选
      }
    },
    // 需要删除的数据
    TransferSelect(selection, row) {
      this.$emit("removeMaterial", selection);
    },
    async getList() {
      //每次加载都需要清空之前的已选数据
      this.$emit("dataRefresh");

      this.skipPath = this.skipPath.replace(/,/g, "");
      let token = window.sessionStorage.getItem("token");
      let formData = new FormData();
      // formData.append("page", this.query.page);
      // formData.append("pageSize", this.query.pageSize);
      formData.append("zycmToken", token);
      formData.append("relativePath", this.skipPath);
      formData.append("materialName", this.InputText);
      formData.append("type", this.ChangeText);
      this.currentTableLoad("media_group_material_table", true, formData);
      // const { data: res } = await this.$http.post(
      //   "material/selectPage",
      //   formData
      // );
      // this.query.total = res.total;
      // this.query.pageSize = res.pageSize;
      // this.query.page = res.page;
      // res.dataList.forEach((element, index) => {
      //   if (element.type == 0) {
      //     element["isOpen"] = true;
      //   } else {
      //     element["isOpen"] = true;
      //   }
      // });
      // this.tableData = res.dataList;
    },
    // handleSizeChange(val) {
    //   this.query.pageSize = val;
    //   this.getList();
    // },
    // handleCurrentChange(val) {
    //   this.query.page = val;
    //   this.getList();
    // },
    // indexMethod(index) {
    //   return (this.query.page - 1) * this.query.pageSize + index + 1;
    // },
    loadMaterialByCondition(materialNameP, materialTypeP) {
      //根据传参查询
      //检验值变化 确定页码是否需重置
      if (this.ChangeText != materialTypeP || this.InputText != materialNameP) {
        this.query.page = 1;
      }
      //this.query.page = 1;
      this.InputText = materialNameP;
      this.ChangeText = materialTypeP;
      this.getList();
    },
    rowHandle({ row, rowIndex }) {
      return row.type !== 0 ? "" : "el-hide";
    },
  },
};
</script>



<style lang="stylus" scoped>
.video-js {
  width: 500px;
  height: 400px;
}
.demo-table-expand {
  span {
    padding: 0 10px;
  }
}
.previewClass {
  img {
    max-width: 100%;
  }
  video {
    max-width: 100%;
  }
}
.HeadShortcut {
  display: flex;
  height: 25px;
  width: 97%;
  margin: 15px auto;
  border: 1px solid #ccc;
  background-color: #f3f3f3;
  // overflow-x:visible
  .HeadShortcut_ul {
    display: flex;
    font-size: 14px;
    line-height: 25px;
    width: 100%;
    overflow-x:scroll;
    li {
      display: flex;
      color: #333;
      text-align: center;
      cursor: pointer;
      div:nth-child(1) {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      img {
        height: 100%;
        padding: 0 15px;
      }
    }
  }
  .HeadShortcut_icon {
    cursor: pointer;
    width: 35px;
    height: 100%;
    background-color: #fff;
    border-right: 1px solid #ccc;
    overflow: hidden;
    img {
      height: 100%;
      width: 100%;
    }
  }
}
// .HeadShortcut::-webkit-scrollbar {
//   width: 0;
// }
.el-dialog .el-dialog /deep/.demo-table-expand /deep/.el-form-item__label {
  color: #2183d8;
}

/deep/.el-hide .el-table__expand-column .cell {
  display: none;
}

/deep/.el-table th,
.el-table tr {
  background-color: #fafafa;
}
.pagination {
  display: flex;
  height: 60px;
  justify-content: center;
}
.pagination {
  display: flex;
  height: 60px;
  justify-content: center;
}
/deep/.el-pager li,
/deep/.el-pagination .btn-next,
/deep/ .el-pagination .btn-prev {
  border: 1px solid #eee;
  border-radius: 5px;
  margin: 0 5px;
  color: #333;
  padding: 0;
}
/deep/.el-pager li.active {
  background-color: #2183d8;
  color: #fff;
}
/deep/.el-pagination__sizes {
  padding-left: 20px;
}
/deep/.el-form-item__content {
  max-width: 77%;
}
.fold {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.fold /deep/.el-form-item__label {
  color: #0095fb;
}
.fold /deep/.el-form-item {
  min-width: 20%;
  background-color: #fff;
  border: none;
  /deep/.el-form-item__content {
    max-width: 100%;
  }
}
</style>
